<template>
  <div class="risk-compliance c-shadow">
    <jTabNav :items="tabList"></jTabNav>
    <div class="chartTooltip hidden table-wrap1">
    </div>
    <h4 class="detail-base-title sentiment" ref="riskRelation">企业关联图谱 <b class="explain">关联风险企业：
      <span class="blue">{{riskLabel || 0}}</span></b>
    </h4>
    <!-- <j-no-data :mode="'b'" v-if="!flag"></j-no-data> -->
    <div class="loading" v-if="loading">
      <img src="../../assets/images/chart-loading.png" alt>
      <p>企业关联图谱加载中...</p>
    </div>
    <div id="graphDiv" class="graphDiv">
      <div class="tree-graph-tool">
        <div class="company-name">{{entname}}</div>
        <div class="btn-group">
          <ul>
            <li>
              <span class="main"></span>主体企业
            </li>
            <!-- <li>
              <span class="human"></span>人
            </li> -->
            <li>
              <span class="risk"></span>风险企业
            </li>
            <li>
              <span class="company"></span>安全企业
            </li>
          </ul>
          <!-- <div class="btn-area -right-border" @click="showTopo">
            <i class="el-icon-rank"></i>
            <span>显示全屏</span>
          </div> -->
        </div>
      </div>
      <div id="graph2" class="graph2" ref="charts" v-if="tree"></div>
      <div class="graphno" v-else>
        <j-no-data :mode="'b'" msg="b" class="mart"></j-no-data>
      </div>
    </div>
    <!-- <div id="graphDiv" class="graphDiv">
      <div id="graph" class="graph2"></div>
    </div> -->
    <!-- <div id="graphDiv" class="graphDiv">
      <div id="graph3" class="graph2"></div>
    </div> -->
    <!--相似企业-->
    <h4 class="detail-base-title sentiment xsqy" ref="riskRelation2">其他关联企业风险<span class="title">{{total1 || 0}}</span></h4>
    <j-no-data :mode="'b'" msg="b" v-if="!total1"></j-no-data>
    <div class="table-wrap" v-else>
      <table class="" width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>企业名称</th>
          <th>烽火指数</th>
          <th>风险类型</th>
        </thead>
        <tr v-for="(list,index) in lists" :key="index">
          <td class="text-center">{{index + 1}}</td>
          <td class="text-center">
            <router-link
              tag="a"
              target="_blank"
              :title="list.entName"
              :to="{name:'baseinfo', query: {entname:list.entName,entid:list.id}}"
            >
              <span class="ent-name">{{list.entName || '--'}}</span>
            </router-link>
          </td>
          <td class="text-center">{{list.totalRiskScore || '--'}}</td>
          <td class="text-center">{{list.riskDescription || '--'}}</td>
        </tr>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
          class="fr"
          v-if="total1>10"
          @size-change="handleSizeChange"
          @current-change="paging"
          :current-page.sync="listParams.pageNum"
          :page-size="listParams.pageSize"
          layout="prev, pager, next, jumper"
          :total.sync="total1"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { jNoData, jTabNav } from "../../components"
import { entdetail as api } from "../../api"
import JusTree from "../../assets/js/jus_tree"
import _ from '../../../static/js/underscore.js'
import JusTree2 from "../../assets/js/jus_tree2"
import JusTree3 from "../../assets/js/jus_tree3"
import { TreeChart } from "../../assets/js/treeChart"
export default {
  data() {
    return {
      entname: "",
      flag: false,
      tabList: [],
      token:'',
      tree:true,
      show:'',
      focusStatus: 0,
      isFullscreen: false,
      loading: true,
      riskLabel: "加载中...",
      dataChart: [],
      len: 1,
      lists: [],
      total: 0,
      total1: 0,
      sameData: 0,
      listParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    // 改变 isfull
    showTopo() {
      let data = this.$router.resolve({name:'topo', query:{name:this.entname}})
      window.open(data.href, '_blank')
    },
    initChart() {
      let params = { entName: this.entname }
      api.getRelationChart(params).then(ret => {
        if (ret.data && ret.data.chartJson) {
          let chartData = JSON.parse(ret.data.chartJson)
          this.flag = chartData.data.name
          let chartWrap = document.querySelector('#graph2')
          if (chartWrap) {
            chartWrap.innerHTML = ''
          }
          this.riskLabel = chartData.riskCount
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: chartData.riskCount,
            offsetTop: this.$refs['riskRelation'] ? this.$refs['riskRelation'].offsetTop : 0
          })
          var jusTree = new JusTree({
            id: '#graph2',
            data: chartData.data,
            colors: [
              '#fe0000',
              '#ff9400',
              '#f6dd0e',
              '#00d7fe',
              '#005ed2',
              '#b33ee3',
              '#f320b0'
            ]
          })
          this.loading = false
          jusTree.init()
        }
      })
    },
    handleSizeChange() {},
    paging(index) {
      this.listParams.pageNum = index
      this.getSameCompany()
    },
    // 获取相似企业
    getSameCompany() {
      this.token = JSON.parse(sessionStorage.getItem("user")).token || ''
      let params = Object.assign(this.listParams, {entName: this.entname, Authorization: this.token})
      api.getSameCompany(params).then(rtn => {
        if (!this.sameData) {
          this.tabList.push({
            idx: 2,
            name: '其他关联企业风险',
            num: rtn.data.total || 0,
            offsetTop: this.$refs['riskRelation2'] ? this.$refs['riskRelation2'].offsetTop : 0
          })
          ++this.sameData
        }
        if (!rtn.data || !rtn.data.list) return false
        this.lists = rtn.data.list
        this.total1 = rtn.data.total
      }).catch(err => {
        console.log(err)
        if (!this.sameData) {
          this.tabList.push({
            idx: 2,
            name: '其他关联企业风险',
            num: 0,
            offsetTop: this.$refs['riskRelation2'] ? this.$refs['riskRelation2'].offsetTop : 0
          })
          ++this.sameData
        }
      })
    },
    // 数据源的关联图谱
    getrelation() {
      // relationTypes
      // 1  投资
      // 2  管理
      // 3  任职正管理类
      let params = {entName:'北京蓝光晶点文化传媒有限公司', relationTypes:'1,2,3'}
      if (this.focusStatus*1 === 1) {
        // 重点关注三级
        params.levelNum = 3
      } else {
        // 重点关注一级 包括点击
        params.levelNum = 1
      }
      api.getandRelationView(params).then(ret => {
        if (!ret.data) {
          this.flag = false
        }
        let title = '北京蓝光晶点文化传媒有限公司'
        let node = ret.data.node
        let relation = ret.data.relation
        this.loading = false
        let datajson = this.madeData(node, relation, title)
        var jusTree2 = new JusTree2({
          divId: "#graph3",
          width:document.querySelector("#graph3").offsetWidth,
          data: datajson,
          height: document.querySelector("#graph3").offsetHeight
        })
        this.riskLabel = this.madeData(node, relation, title).riskNum
        this.tabList.push({
          idx: 1,
          name: '关联风险企业',
          num: this.riskLabel,
          offsetTop: this.$refs['riskRelation'].offsetTop || 0
        })
        jusTree2.init()
      })
    },
    madeData(node, relation, title) {
      let data = {}
      let relations = []
      let nodes = []
      let riskNum = 0
      relation.map(rea => {
        relations.push({
          from:rea.startNode.name,
          to:rea.endNode.name,
          relation:rea.relationName
        })
      })
      let links = _.uniq(relations, true, function(item) {
        return item.from + item.to + item.relation
      })
      // 返过来node
      node.map(item => {
        nodes.push({
          name:item.entName,
          type:item.type,
          isRisk:item.isRisk
        })
      })
      nodes = _.uniq(nodes, true, function(item) {
        return item.name
      })
      nodes.map(item => {
        if (item.isRisk && item.isRisk !== 'false') {
          ++riskNum
        }
      })
      data.nodes = nodes
      data.links = links
      data.title = title
      return this.processData(data, riskNum)
    },
    // d3 固定数据
    setColor(item, unique) {
      if (!unique[item.relation]) {
        switch (item.relation) {
          case '投资':
            item.lineColor = '#567ee4'
            break
          case '董事':
            item.lineColor = '#61c3e2'
            break
          case '董事长':
            item.lineColor = '#9d85e2'
            break
          case '法定代表人':
            item.lineColor = '#d7137e'
            break
          case '监事':
            item.lineColor = '#76c86a'
            break
          case '副董事长':
            item.lineColor = '#ef9c58'
            break
          case '执行董事':
            item.lineColor = '#36c68a'
            break
          case '总经理':
            item.lineColor = '#e6be29'
            break
          default:
            item.lineColor = `rgb(${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)},${Math.ceil(Math.random()*255)})`
            break
        }
        unique[item.relation] = item.lineColor
      } else {
        item.lineColor = unique[item.relation]
      }
    },
    setNumber(group) {
      if (group.length === 0) return
      if (group.length === 1) {
        group[0].linknum = 0
        return
      }
      let maxLinkNumber = group.length % 2 === 0 ? group.length / 2 : (group.length - 1) / 2
      let startLinkNum1 = -maxLinkNumber + 0.5
      let startLinkNum2 = -maxLinkNumber
      group.forEach(item => {
        item.linknum = group.length % 2 === 0 ? startLinkNum1++ : startLinkNum2++
      })
    },
    processData(data, riskNum) {
      let links = []
      let title = data.title
      let linkGroup = {}
      let linkMap = {}
      let unique = {}
      let nodes = {}
      let relationColor = {}
      data.links.forEach(item => {
        var obj = {}
        obj.source = item.from
        obj.target = item.to
        obj.relation = item.relation
        links.push(obj)
      })
      data.nodes.forEach(item => {
        nodes[item.name] = {
          name:item.name,
          type:item.type,
          isRisk:item.isRisk!==undefined?item.isRisk:undefined,
          radius:item.type==='person'?28:42
        }
      })
      if (nodes[title]) {
        nodes[title].isMain=1
      }
      links.forEach(item => {
        this.setColor(item, unique)
        var key = item.source < item.target ? `${item.source}:${item.target}` : `${item.target}:${item.source}`
        if (!linkMap.hasOwnProperty(key)) {
          linkMap[key] = 0
        }
        linkMap[key] += 1
        if (!linkGroup.hasOwnProperty(key)) {
          linkGroup[key] = []
        }
        linkGroup[key].push(item)
      })
      links.map(item => {
        var key = item.source < item.target ? `${item.source}:${item.target}` : `${item.target}:${item.source}`
        item.size = linkMap[key]
        var group = linkGroup[key]
        this.setNumber(group)
      })
      links.map(item => {
        item.source = nodes[item.source]
        item.target = nodes[item.target]
      })
      links.map(item => {
        relationColor[item.relation] = { "relation": item.relation, "lineColor": item.lineColor }
      })
      links.map(item => {
        item.sourceRadius = nodes[item.source.name].radius
        item.targetRadius = nodes[item.target.name].radius
      })
      return {
        nodes,
        links,
        relationColor,
        title,
        riskNum
      }
    },
    // 获取数据
    getData() {
      // this.$refs['charts'].style.marginTop='15px'
      let params = {
        entName: this.entname
      }
      api.gettianyan(params).then(ret => {
        if (ret.data) {
          this.flag = this.entname
          this.loading = true
          let data = ret.data.result
          let count = ret.data.riskCount
          this.madechartData(data, count)
        } else {
          this.flag = false
          this.loading = false
          this.riskLabel = 0
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: 0,
            offsetTop: this.$refs['riskRelation'].offsetTop || 0
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 本地库图谱数据
    getData1() {
      let params = {
        // entName: '天津市三兴电气工程有限公司'
        // entName: '韩华泰科（天津）有限公司'
        entName: '天津中环电子信息集团有限公司'
      }
      api.gettianyanEntNewLocal(params).then(ret => {
        if (ret.data) {
          this.flag = this.entname
          this.loading = true
          let data = ret.data
          let count = ret.data.riskCount
          this.madechartData(data, count)
        } else {
          this.flag = false
          this.loading = false
          this.riskLabel = 0
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: 0,
            offsetTop: this.$refs['riskRelation'].offsetTop || 0
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 改变数据
    madechartData(chartData, count) {
      let chartDatanode = chartData.nodes
      let chartDatalink = chartData.relationships
      let datanode = []
      let datalink = []
      chartDatanode.map(item => {
        datanode.push({
          id:item.id,
          name:item.properties.name,
          isRisk:item.properties.isRisk,
          type:item.labels[0] === 'Company' ? 'company' : 'person'
        })
      })
      chartDatalink.map(item => {
        datalink.push({
          id:item.id,
          relation:item.properties.labels[0],
          from:item.startNode,
          to:item.endNode
        })
      })
      datanode.map(node => {
        datalink.map(link => {
          if (link.from === node.id) {
            link.from = node.name
          }
          if (link.to === node.id) {
            link.to = node.name
          }
        })
      })
      datanode = _.uniq(datanode, true, function(item) {
        return item.name
      })
      datalink = _.uniq(datalink, true, function(item) {
        return item.from + item.to + item.relation
      })
      let data = {}
      data.nodes = datanode
      data.links = datalink
      // data.title = this.entname
      // data.title = '天津市三兴电气工程有限公司'
      // data.title = '韩华泰科（天津）有限公司'
      data.title = '天津中环电子信息集团有限公司'
      this.madeChart(data, count)
    },
    // 类似于天眼的图
    madenewData() {
      let params = {
        entName:'天津中环电子信息集团有限公司'
      }
      api.gettianyanEntNewLocal(params).then(ret => {
        if (ret.data) {
          this.flag = this.entname
          this.loading = true
          let count = ret.data.riskCount
          let data = ret.data
          let nodelist = data.nodes
          let relationlist = data.relationships
          let nodes = []
          let main = {
            name:params.entName,
            id:''
          }
          nodelist.map(item => {
            nodes.push({
              id:item.id,
              name:item.properties.name,
              ntype:item.properties.isRisk === 'true' && item.labels[0] === 'Company'?'Risk':item.labels[0],
              list:{}
            })
            if (item.properties.name === main.name) {
              main.id = item.id
            }
          })
          let relations = []
          relationlist.map(item => {
            relations.push({
              id:item.id,
              startNode:item.startNode,
              endNode:item.endNode,
              type:item.type,
              label:item.properties.labels[0]
            })
          })
          nodes.map(node => {
            relations.map(link => {
              if (node.id === link.startNode) {
                node.list[link.endNode] = link.endNode
              }
              if (node.id === link.endNode) {
                node.list[link.startNode] = link.startNode
              }
            })
          })
          let jsonData = {
            nodes,
            relations,
            main
          }
          this.riskLabel = count
          this.loading = false
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: count,
            offsetTop: this.$refs['riskRelation'].offsetTop || 0
          })
          var jusTree3 = new JusTree3({
            divId: "#graph2",
            width:document.querySelector("#graph2").offsetWidth,
            data: jsonData,
            height: document.querySelector("#graph2").offsetHeight
          })
          jusTree3.init()
        } else {
          this.flag = false
          this.loading = false
          this.riskLabel = 0
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: 0,
            offsetTop: this.$refs['riskRelation'].offsetTop || 0
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 企查查
    tzqy() {
      let params = {
        entName:this.entname
      }
      // let nodes = {"Category":1,"children":[{"Category":3,"children":[{"Category":3,"children":[{"Category":3,"children":[{"Category":3,"count":0,"keyNo":"032815f134b4b60a3e3c84c2b8e5fb51","level":3,"name":"泛海集团有限公司","Shortname":"法人股东"},{"Category":3,"count":0,"keyNo":"44ed9017218e4af421d3c7cbf8a83f38","level":3,"name":"通海控股有限公司","Shortname":"法人股东"}],"count":2,"keyNo":"e5bf6ef1c4e5566716cd70e66de6a66c","level":2,"name":"中国泛海控股集团有限公司","Shortname":"企业法人"},{"Category":3,"children":[{"Category":3,"children":[{"Category":4,"level":4,"name":"中国泛海控股集团有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"觅优投资有限公司","Shortname":"担任法人,对外投资,在外任职"},{"Category":4,"level":4,"name":"觅优资本管理有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"自强控股有限公司","Shortname":"对外投资,在外任职"},{"Category":4,"level":4,"name":"泛海集团有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"北京双志伟业整合营销顾问有限公司","Shortname":"对外投资,在外任职"}],"count":6,"keyNo":"44ed9017218e4af421d3c7cbf8a83f38_卢晓云","level":3,"name":"卢晓云","Shortname":"自然人股东"},{"Category":3,"children":[{"Category":4,"level":4,"name":"泛海控股股份有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"泛海建设集团股份有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"武汉中央商务区股份有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"泛海扶贫产业资本投资管理有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"泛海集团有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"青岛通达建设股份有限公司","Shortname":"担任法人"},{"Category":4,"level":4,"name":"泛海农业投资有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"光彩文化传媒有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"通海投资集团有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"泛海实业股份有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"潍坊渤海大学城股份有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"亚太寰宇投资有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"北京合天文化传媒有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"自强控股有限公司","Shortname":"对外投资,在外任职"},{"Category":4,"level":4,"name":"四通巨光高新技术发展(控股)有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"泛海文化传媒控股股份有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"北京太美行动文化传播有限公司","Shortname":"对外投资"},{"Category":4,"level":4,"name":"中国泛海控股集团有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"觅优投资有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"海通证券股份有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"泛海创业投资管理有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"内蒙古光彩事业发展中心有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"泛海建设控股有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"北京泰博山智投资咨询有限公司","Shortname":"对外投资"},{"Category":4,"level":4,"name":"中信产业投资基金管理有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"中国民生信托有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"金鼎俱乐部有限公司","Shortname":"对外投资"},{"Category":4,"level":4,"name":"智海资本投资管理有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"山东泛海建设公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"民众资本投资管理有限公司","Shortname":"担任法人,在外任职"},{"Category":4,"level":4,"name":"北京东风春城房地产信息咨询有限责任公司","Shortname":"在外任职"}],"count":31,"keyNo":"44ed9017218e4af421d3c7cbf8a83f38_卢志强","level":3,"name":"卢志强","Shortname":"自然人股东"},{"Category":3,"children":[{"Category":4,"level":4,"name":"觅优资本管理有限公司","Shortname":"在外任职"},{"Category":4,"level":4,"name":"自强控股有限公司","Shortname":"担任法人,对外投资,在外任职"}],"count":2,"keyNo":"44ed9017218e4af421d3c7cbf8a83f38_黄琼姿","level":3,"name":"黄琼姿","Shortname":"自然人股东"}],"count":3,"keyNo":"44ed9017218e4af421d3c7cbf8a83f38","level":2,"name":"通海控股有限公司","Shortname":"企业法人"}],"count":2,"keyNo":"d38966f0194db66fd0b07e9a7c4787a7","level":1,"name":"通海投资集团有限公司","Shortname":"企业法人"}],"count":1,"level":0,"name":"股东","Shortname":"股东"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"c593b93d4fbdedb5700dbceb1b6ed16c","level":1,"name":"宁波梅山保税港区京顺昌为股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"bf05376e2723090ae29319639e03b17b","level":2,"name":"宁波梅山保税港区龙汇北银创业投资管理合伙企业(有限合伙)","Shortname":"梅山保税港区"}],"count":1,"keyNo":"dd1c1a65f2050ee1c1c9e01ffcf30d04","level":1,"name":"宁波致慧文恒股权投资合伙企业(有限合伙)","Shortname":"致慧文恒股权"},{"Category":2,"count":0,"keyNo":"874169daa48bdde98077ad701792a046","level":1,"name":"宁波梅山保税港区盛世天乐投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"count":0,"keyNo":"db0bf46cb32c9540cfb3cb4b3824080e","level":1,"name":"同和资本投资管理有限公司","Shortname":"同和资本投资"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"642f16384a6a0eedf575a1a0bb3c2680","level":2,"name":"嘉兴京川岚晖股权投资合伙企业(有限合伙)","Shortname":"京川岚晖股权"},{"Category":2,"count":0,"keyNo":"c731cf1da19feeb964e7b266afa78929","level":2,"name":"嘉兴民信如轶股权投资合伙企业(有限合伙)","Shortname":"民信如轶股权"},{"Category":2,"count":0,"keyNo":"acb7f18d01078d589785db3d16c03700","level":2,"name":"嘉兴京荣翌晖股权投资合伙企业(有限合伙)","Shortname":"京荣翌晖股权"},{"Category":2,"count":0,"keyNo":"9d91348b05f7344cc43b9287d654fa10","level":2,"name":"嘉兴京森云淼股权投资合伙企业(有限合伙)","Shortname":"京森云淼股权"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"55debc6432947471af3ed3a87cb9f409","level":3,"name":"苏州隆门医药投资合伙企业(有限合伙)","Shortname":"隆门医药投资"}],"count":1,"keyNo":"189472878b5485da8ae443030e5f2974","level":2,"name":"宁波梅山保税港区熙辰宇铭股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"count":0,"keyNo":"ac842a4589c1cc6b2d2c16247203a5d3","level":2,"name":"宁波梅山保税港区京致昌明股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"count":0,"keyNo":"136fb062a12d2285dda54799e4c3ec8c","level":2,"name":"杭州通海启智股权投资基金管理合伙企业(有限合伙)","Shortname":"通海启智股权"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"874169daa48bdde98077ad701792a046","level":3,"name":"宁波梅山保税港区盛世天乐投资合伙企业(有限合伙)","Shortname":"梅山保税港区"}],"count":1,"keyNo":"d4c0891c970df58b77294d4e5851432c","level":2,"name":"宁波梅山保税港区祥昆股权投资合��企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"a1c3f7c06cbcc2c255ade8c4a4e6cb10","level":3,"name":"清远市亿源通光电科技有限公司","Shortname":"亿源通光电"}],"count":1,"keyNo":"886e3f7d2c90d620f48543e95139a08c","level":2,"name":"宁波梅山保税港区汇颐股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"count":0,"keyNo":"96d6c6ba72c4e1976956651d2b6ee4e0","level":2,"name":"民信商业保理有限公司","Shortname":"民信商业保理"},{"Category":2,"count":0,"keyNo":"b2f6dd16ea02fcb53e320ed370e93ab2","level":2,"name":"民信黄金珠宝有限责任公司","Shortname":"民信黄金珠宝"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"3ecfe8dc8d29d4d6c240e006e40bdf75","level":3,"name":"杭州泛远国际物流股份有限公司","Shortname":"泛远国际物流"}],"count":1,"keyNo":"7ff3300ca56bf2c0f562e8fe48e88f77","level":2,"name":"霍尔果斯盛世隆轩股权投资合伙企业(有限合伙)","Shortname":"盛世隆轩股权"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"985e1045737414dd5e601f395d11a872","level":3,"name":"新疆完满教育服务有限公司","Shortname":"完满教育服务"},{"Category":2,"count":0,"keyNo":"80198349fdfdb6c08499a0319bb09302","level":3,"name":"重庆翔美教育投资有限公司","Shortname":"翔美教育投资"}],"count":2,"keyNo":"a6995097472928082919b4919b6fbc33","level":2,"name":"深圳复思尔汇投资合伙企业(有限合伙)","Shortname":"复思尔汇投资"},{"Category":2,"count":0,"keyNo":"bb1c86324899b6343e5a331f68107375","level":2,"name":"嘉兴民信敏如投资合伙企业(有限合伙)","Shortname":"民信敏如投资"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"f7287a156357b05cce94d76e9906ea19","level":3,"name":"上海麒鸿投资中心(有限合伙)","Shortname":"麒鸿投资中心"}],"count":1,"keyNo":"12e0fe512691fd0e3042b68504ae2bfc","level":2,"name":"北京鹰溪谷投资咨询中心(有限合伙)","Shortname":"鹰溪谷投资咨"}],"count":15,"keyNo":"6a95b333d1848316059742a2cb32c33a","level":1,"name":"民信资本投资管理有限公司","Shortname":"民信资本投资"},{"Category":2,"count":0,"keyNo":"27d0304aea4f68d954836e08fd46b85e","level":1,"name":"民生财富投资管理有限公司深圳分公司","Shortname":"民生财富投资"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"c731cf1da19feeb964e7b266afa78929","level":2,"name":"嘉兴民信如轶股权投资合伙企业(有限合伙)","Shortname":"民信如轶股权"},{"Category":2,"count":0,"keyNo":"189472878b5485da8ae443030e5f2974","level":2,"name":"宁波梅山保税港区熙辰宇铭股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"count":0,"keyNo":"c593b93d4fbdedb5700dbceb1b6ed16c","level":2,"name":"宁波梅山保税港区京顺昌为股权投资合伙企业(有限合伙)","Shortname":"梅山保税港区"},{"Category":2,"children":[{"Category":2,"count":0,"keyNo":"bf05376e2723090ae29319639e03b17b","level":3,"name":"宁波梅山保税港区龙汇北银创业投资管理合伙企业(有限合伙)","Shortname":"梅山保税港区"}],"count":1,"keyNo":"dd1c1a65f2050ee1c1c9e01ffcf30d04","level":2,"name":"宁波致慧文恒股权投资合伙企业(有限合伙)","Shortname":"致慧文恒股权"}],"count":4,"keyNo":"1ac3134f8019ead55026a4650c085da5","level":1,"name":"泛海投资基金管理有限公司","Shortname":"泛海投资基金"}],"count":7,"level":0,"name":"对外投资","Shortname":"对外投资"}],"count":8,"keyNo":"7d4dacad2f440b2ce4567edb1499c1fa","level":0,"name":"民生财富投资管理有限公司","Shortname":"民生财富投资"}
      api.gettianyanEntNewLocal(params).then(ret => {
        if (ret.data.Node) {
          let regname = new RegExp('Name', "g")
          let regChild = new RegExp('Children', "g")
          let data = JSON.stringify(ret.data.Node).replace(regname, 'name').replace(regChild, 'children')
          // let data = JSON.stringify(nodes).replace(regname, 'name').replace(regChild, 'children')
          data = JSON.parse(data)
          let count = ret.data.riskCount ? ret.data.riskCount : 0
          this.flag = params.entName
          this.loading = true
          let treedata = this.makechart(data)
          let width = document.querySelector("#graph2").offsetWidth
          let height = document.querySelector("#graph2").offsetHeight
          this.riskLabel = count
          this.loading = false
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: count || 0,
            offsetTop: this.$refs['riskRelation'] ? this.$refs['riskRelation'].offsetTop : 0
          })
          let boxD = {
            id:'#graph2',
            width:width,
            height:height
          }
          TreeChart.drawChart(boxD, treedata)
          this.tree = treedata || false
        } else {
          this.flag = false
          this.loading = false
          this.riskLabel = 0
          this.tree = false
          this.tabList.push({
            idx: 1,
            name: '关联风险企业',
            num: 0,
            offsetTop: this.$refs['riskRelation'] ? this.$refs['riskRelation'].offsetTop : 0
          })
        }
      }).catch(err => {
        console.log(err)
        this.flag = false
        this.loading = false
        this.riskLabel = 0
        this.tree = false
        this.tabList.push({
          idx: 1,
          name: '关联风险企业',
          num: 0,
          offsetTop: this.$refs['riskRelation'] ? this.$refs['riskRelation'].offsetTop : 0
        })
      })
    },
    makechart(data) {
      let downdata = {}
      let updata = {}
      data.children.map(item => {
        if (item.Category === 2) {
          downdata.name = data.name
          downdata.direction = 'downward'
          downdata.children = item.children
        }
        if (item.Category === 3) {
          updata.name = data.name
          updata.direction = 'upward'
          updata.children = item.children
        }
      })
      let treedata = {
        downward:downdata,
        upward:updata
      }
      return treedata
    },
    // 作图
    madeChart(data, count) {
      let datajson = this.processData(data)
      this.riskLabel = count
      this.tabList.push({
        idx: 1,
        name: '关联风险企业',
        num: count,
        offsetTop: this.$refs['riskRelation'].offsetTop || 0
      })
      var jusTree2 = new JusTree2({
        divId: "#graph2",
        width:document.querySelector("#graph2").offsetWidth,
        data: datajson,
        height: document.querySelector("#graph2").offsetHeight
      })
      this.loading = false
      jusTree2.init()
    }
  },
  mounted() {
    this.entname = this.$route.query.entname
    // this.focusStatus = this.$route.query.focusStatus
    // this.initChart()
    this.getSameCompany()
    // this.madenewData() // 类似于天眼的图
    // this.getData() // 天眼查  数据已调通
    // this.getData1() // 本地库天眼查 效果已通
    // this.getrelation() // hyr 北京蓝光晶点文化传媒有限公司
    this.tzqy()
  },
  components: {
    jNoData,
    jTabNav
  }
}
</script>
<style lang="scss" scoped>
.risk-compliance {
  padding: 28px 40px;
  font-size: 14px;
  position: relative;
  // .el-message-box {
  //   width: 50% !important;
  // }
  .hidden {
    display: none;
  }
  .chartTooltip {
    position: fixed;
    background: #fff;
    width: 22%;
    height: 400px;
    left: 5px;
    top: 170px;
    z-index: 3;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  }
  .overflow-hidden {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .el-message-box__wrapper {
    text-align: left;
  }
  // .messageBox {
  //   position: 
  // }
  .downwardLink {
    fill: none;
    stroke: #8b4513;
    stroke-width: 1px;
    opacity: 0.5;
  }

  .upwardLink {
    fill: none;
    stroke: #37592b;
    stroke-width: 1px;
    opacity: 0.5;
  }
  #graph {
    svg {
      background: rgb(245, 245, 245);
    }

    text {
      font: Microsoft YaHei;
      pointer-events: none;
      user-select: none;
    }

    .link {
      stroke-opacity: 1;
      stroke-width: 0.8;
    }
    

    .link-active {
      stroke-opacity: 1;
      stroke-width: 3;
    }

    .linetext {
      font-family: Microsoft YaHei;
      text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }
  }
  .tree-graph-tool {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 34px;
    border: 0;
    background: #fff;
    -webkit-box-shadow: 0 0 2px #e0e0e0;
    box-shadow: 0 0 2px #e0e0e0;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .company-name {
      padding-left: 15px;
      height: 100%;
      display: flex;
      align-items: center;
      // cursor: pointer;
    }
    .btn-group {
      padding-right: 15px;
      height: 100%;
      display: flex;
      align-items: center;
      ul {
        display: flex;
      }
      li {
        margin-right: 10px;
        line-height: 34px;
        span {
          // width: 20px;
          height: 10px;
          width: 30px;
          display: inline-block;
          margin: 0 5px;
          border-radius: 20%;
        }
        .main {
          // background: #FF9F00;
          background: #46A2D2;
          opacity: 0.3;
          border: #1F61E5 1px solid;
        }
        .human {
          background: #9EEA6A;
        }
        .risk {
          // background: #f00;
          background: #D60D0D;
          opacity: 0.5;
          border: #D60D0D 1px solid;
        }
        .company {
          // background: #84A5EF;
          background: #2CDD2C;
          opacity: 0.5;
          border: #2CDD2C 1px solid;
        }
      }
    }
    .btn-area {
      margin-left: 100px;
      cursor: pointer;
    }
  }
  path.link.resolved {
    stroke-dasharray: 2;
  }
  circle {
    stroke-width: .5px;
  }
  text {
    font: 10px sans-serif;
    pointer-events: none;
  }
  text.shadow {
    stroke: #fff;
    stroke-width: 2px;
    stroke-opacity: .8;
  }
  .labeltext {
    fill: #000000;
  }
  .nodetext {
    font-size: 8px !important;
    fill: #000000;
  }
  .linetext {
    fill: #0000ff;
    fill-opacity: 0;
  }
  .table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
    td,
    th {
      border: 1px solid #e2e2e2;
      line-height: 40px;
    }
    th {
      line-height: 38px;
      color: #999;
      background: #f2f1f1;
    }
    td {
      padding: 0 10px;
    }
  }
  .table-wrap {
    padding: 10px 20px 30px;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 38px;
      }
      th {
        line-height: 40px;
        color: #999;
        background: #f2f1f1;
      }
      td {
        padding: 0 10px;
      }
      th:first-child,
      th:nth-child(3) {
        width: 100px;
      }
    }
  }
  .table-wrap1 {
    padding: 0 0 20px 0;
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 38px;
      }
      th {
        line-height: 40px;
        color: #999;
        background: #f2f1f1;
      }
      td {
        padding: 0 10px;
      }
    }
  }
  .fa-expand {
    padding: 10px 20px;
    background: #fff;
    border: #1891ef 1px solid;
    cursor: pointer;
    z-index: 1;
  }
  .graphDiv {
    width: 100%;
    // height: 700px;
    overflow: hidden;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fff;
    position: relative;
  }
  .graph {
    width: 100%;
    height: 500px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fff;
  }
  .graph2 {
    width: 100%;
    height: 700px;
    border: 1px solid #eee;
    border-radius: 5px;
    background: #fff;
    margin-top: 34px;
  }
  .graphno {
    width: 100%;
    height: 500px;
    // border: 1px solid #eee;
    border-radius: 5px;
    background: #fff;
    margin-top: 34px;
    .mart {
      margin-top: 100px;
    }
  }
  .detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 10px 12px;
    margin-bottom: 15px;
    position: relative;
    background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#1891ef),
      to(#1891ef)
    );
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title .title {
	
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .explain {
    color: #999;
    margin-left: 5%;
    font-weight: 500;
    font-size: 12px;
  }
  .loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 80px);
    position: absolute;
    height: 500px;
    z-index: 1;
    img {
      width: 100px;
      height: 100px;
      margin-bottom: 20px;
      animation: rotateself 0.5s linear infinite;
    }
    p {
      display: block;
    }
  }
  @keyframes rotateself {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/entDetail/riskRelation.vue